import { createContext, useContext, useState, useEffect } from 'react';

interface ColorContextType {
  primaryColor: string;
  setPrimaryColor: (color: string) => void;
  secondaryColor: string;
  setSecondaryColor: (color: string) => void;
}

const ColorContext = createContext<ColorContextType | undefined>(undefined);

export function ColorProvider({ children }: { children: React.ReactNode }) {
  const [primaryColor, setPrimaryColor] = useState(() => 
    localStorage.getItem('primaryColor') || '#0071E3'
  );
  const [secondaryColor, setSecondaryColor] = useState(() => 
    localStorage.getItem('secondaryColor') || '#86868B'
  );

  useEffect(() => {
    localStorage.setItem('primaryColor', primaryColor);
    document.documentElement.style.setProperty('--color-primary', primaryColor);
    
    // Generate different shades
    const color = primaryColor.substring(1); // Remove #
    const rgb = parseInt(color, 16);
    const r = (rgb >> 16) & 0xff;
    const g = (rgb >> 8) & 0xff;
    const b = rgb & 0xff;

    // Generate lighter and darker variants
    for (let i = 1; i <= 9; i++) {
      const amount = i * 10;
      // Lighter variants (50-400)
      if (i <= 4) {
        const lighter = `rgb(${Math.min(255, r + amount * 2)}, ${Math.min(255, g + amount * 2)}, ${Math.min(255, b + amount * 2)})`;
        document.documentElement.style.setProperty(`--color-primary-${i}00`, lighter);
      }
      // Darker variants (600-900)
      else {
        const darker = `rgb(${Math.max(0, r - amount)}, ${Math.max(0, g - amount)}, ${Math.max(0, b - amount)})`;
        document.documentElement.style.setProperty(`--color-primary-${i}00`, darker);
      }
    }
  }, [primaryColor]);

  useEffect(() => {
    localStorage.setItem('secondaryColor', secondaryColor);
    document.documentElement.style.setProperty('--color-secondary', secondaryColor);
    
    // Similar shade generation for secondary color
    const color = secondaryColor.substring(1);
    const rgb = parseInt(color, 16);
    const r = (rgb >> 16) & 0xff;
    const g = (rgb >> 8) & 0xff;
    const b = rgb & 0xff;

    for (let i = 1; i <= 9; i++) {
      const amount = i * 10;
      if (i <= 4) {
        const lighter = `rgb(${Math.min(255, r + amount * 2)}, ${Math.min(255, g + amount * 2)}, ${Math.min(255, b + amount * 2)})`;
        document.documentElement.style.setProperty(`--color-secondary-${i}00`, lighter);
      } else {
        const darker = `rgb(${Math.max(0, r - amount)}, ${Math.max(0, g - amount)}, ${Math.max(0, b - amount)})`;
        document.documentElement.style.setProperty(`--color-secondary-${i}00`, darker);
      }
    }
  }, [secondaryColor]);

  return (
    <ColorContext.Provider value={{ 
      primaryColor, 
      setPrimaryColor, 
      secondaryColor, 
      setSecondaryColor 
    }}>
      {children}
    </ColorContext.Provider>
  );
}

export function useColor() {
  const context = useContext(ColorContext);
  if (context === undefined) {
    throw new Error('useColor must be used within a ColorProvider');
  }
  return context;
}